import React, { useEffect, useState } from 'react'
import { Descriptions, PageHeader } from "antd"
import http from "../../util/http"
import style from "../sendbox/news-manage/newsPreview.module.scss"
import moment from "moment"
import { LikeOutlined, MessageOutlined, EyeOutlined } from "@ant-design/icons"
export default function TouristDetail(props) {
    const user = JSON.parse(localStorage.getItem("token"))
    // console.log(user);
    const [saveList, setSaveList] = useState(null);
    useEffect(() => {
        const id = props.match.params.id;
        http.get(`/news/${id}?_expand=category&_expand=role`).then(res => {
            setSaveList({
                ...res.data,
                view: res.data.view + 1
            })
            return res.data
        }).then(res => {
            http.patch(`/news/${id}`, {
                view: res.view + 1
            })
        })
    }, [props.match.params.id])
    const goods = () => {
        setSaveList({
            ...saveList,
            star: saveList.star + 1
        })
        http.patch(`/news/${saveList.id}`, {
            star: saveList.star + 1
        })
    }
    return (
        < div >
            {saveList && console.log(saveList.auditState)}
            {saveList && <PageHeader
                onBack={() => window.history.back()}
                title={saveList.title}
                subTitle={saveList.category.value}
            >
                <Descriptions size="small" column={3}>
                    <Descriptions.Item label="创建者:">{saveList.author}</Descriptions.Item>
                    <Descriptions.Item label="发布时间:">{saveList.publishTime ? moment(saveList.createTime).format("YYYY/MM/DD HH:mm:ss") : "-"}</Descriptions.Item>
                    <Descriptions.Item label="区域:">{saveList.region}</Descriptions.Item>
                    <Descriptions.Item label="访问数量:">
                        {<span style={{ color: "green" }}>{saveList.view} <EyeOutlined /></span>}
                    </Descriptions.Item>
                    <Descriptions.Item label="点赞数量:">
                        {<span style={{ color: "green" }}>{<span>{saveList.star} <LikeOutlined
                            onClick={() => goods()}
                        /></span>}</span>}
                    </Descriptions.Item>
                    <Descriptions.Item label="评论数量:">
                        {<span style={{ color: "green" }}>{<span>{0} <MessageOutlined /></span>}</span>}
                    </Descriptions.Item>
                </Descriptions>
            </PageHeader>
            }
            {
                saveList && <div dangerouslySetInnerHTML={{
                    __html: saveList.content
                }} className={style.content}>
                </div>
            }
        </ div>
    )
}
